<!-- 头部 -->
<template>
  <div class="center-bottoms">
    <div class="flex justify-between align-center titleBox" style="height: 30px">
      <p class="flex titleBox-p align-center">
        <img src="@/assets/img/icon-dot.png" >
        <span class="u-m-l-14">学校当日报警详情</span>
      </p>
      <p class="titleBox-p flex align-center">
        <img src="@/assets/img/icon-dot.png" >
        <span class="u-m-l-14">当前报警总数:{{allNum}}</span>
      </p>
    </div>
    <div class="chart u-m-t-10" style="height: 50px">
      <table class="table1" style="height: 100%">
        <tr class="headtr">
          <th class="headtr-th" style="width: 6%;">序号</th>
          <th class="headtr-th" style="width: 20%">人员名称</th>
          <th class="headtr-th" style="width: 10%">年纪</th>
          <th class="headtr-th" style="width: 10%">班级</th>
          <th class="headtr-th" style="width: 14%;">IMEI</th>
          <th class="headtr-th" style="width: 10%;">报警类型</th>
          <th class="headtr-th" style="width: 20%">报警内容</th>
          <th class="headtr-th" style="width: 10%">报警时间</th>
        </tr>
      </table>
    </div>
    <div class="chart" style="height: calc( 100% - 95px )">
      <table class="table1">
        <vue-seamless-scroll :data="tableData" class="seamless-warp">
          <ul class="item">
            <li
              v-for="(item, index) in tableData"
              :key="index"
              class="flex align-center"
              style="justify-content: space-around"
            >
              <span class="oneOver" style="width: 6%">{{ index+1 }}</span>
              <span class="oneOver" style="width: 20%">{{ item.student_name }}</span>
              <span class="oneOver" style="width: 10%">{{
                item.grade_name
              }}</span>
              <span style="width: 10%; text-align: center">{{
                item.class_name
              }}</span>
              <span style="width: 14%; text-align: center">{{item.imei}}</span>
              <span style="width: 10%; text-align: center">{{item.content}}</span>
              <span style="width: 20%; text-align: center">{{item.remark}}</span>
              <span style="width: 10%; text-align: center">{{item.create_time|substData}}</span>
            </li>
          </ul>
        </vue-seamless-scroll>
      </table>
      <span
        v-if="!tableData.length"
        style="
          font-size: 12px;
          text-align: center;
          width: 100%;
          display: block;
          margin-top: 20px;
          color: #ffffff;
        "
        >暂无数据</span
      >
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "leftTopBox",
  components: {vueSeamlessScroll},
  props:{
     schooleId:{
       type:[String, Number],
       default:0
     }
  },
  filters:{
    substData(val){
      if(val){
        return val.substring(0,11)
      }else{
        return ''
      }
    }
  },
  data() {
    return {
      pageflag: false,
      tableData: [],
      allNum:0
    };
  },

  mounted() {
    this.getDataHandler();
  },
  methods: {
     async getDataHandler(){
       let params = {
        schoole_id:this.schooleId,
        page:1,
        page_size:1000
      }
      let { data } = await this.$http.get('/police_center/getTodayResortList', { params })
      try{
        if ( data.code === 0 ) {
          this.tableData=data.data.list
          this.allNum=data.data.total
        }
      } catch {
        console.log('error')
      }
    },
    getData() {
      let res = [
        {
          id: "073a2ece8b2b402cb2b9dcd719843552",
          name: "新宇航空制造（苏州）有限公司",
          coordinate: "120.74119183391946,31.34926338702725",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 2,
          gatewayCount: 2,
          paramCount: 6,
          hasWarning: 0,
        },
        {
          id: "162fca3718ef4f819f2bc1da2a496682",
          name: "苏州黑猫（集团）有限公司",
          coordinate: "120.85648763934466,31.331926902871167",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 4,
          gatewayCount: 1,
          paramCount: 3,
          hasWarning: 0,
        },
        {
          id: "291f733652074862966123906e56e264",
          name: "曙光制动器（苏州）有限公司",
          coordinate: "120.79820099649928,31.347941885734542",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 2,
          hasWarning: 0,
        },
        {
          id: "2e17e7074380418e87ca2b031ec695df",
          name: "苏州外延世电子材料有限公司",
          coordinate: "120.77787000721408,31.35380332673656",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 2,
          gatewayCount: 2,
          paramCount: 8,
          hasWarning: 0,
        },
        {
          id: "38e088710cbd4b74b3afc5533a948b43",
          name: "江苏安胜达安全科技有限公司",
          coordinate: "120.7173127175311,31.367293588305834",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: null,
          gatewayCount: null,
          paramCount: null,
          hasWarning: 0,
        },
        {
          id: "3c9018a47d8a4ae0841c78f1bc7810d1",
          name: "贺氏（苏州）特殊材料有限公司",
          coordinate: "120.80630577830188,31.3055615071069",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 4,
          gatewayCount: 1,
          paramCount: 16,
          hasWarning: 0,
        },
        {
          id: "4057a625101e448595d3f2df7792b33e",
          name: "苏州安泰空气技术有限公司",
          coordinate: "120.73955566026359,31.36034883213269",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 6,
          hasWarning: 0,
        },
        {
          id: "4e2c551765364884909ba506a2192347",
          name: "贲安能源科技江苏有限公司",
          coordinate: "121.12465348323587,31.50433618335127",
          districtCode: "320585",
          districtName: "太仓市",
          deviceCount: 2,
          gatewayCount: 1,
          paramCount: 10,
          hasWarning: 0,
        },
        {
          id: "6294d10c867e4d76834a58e9c460b2f1",
          name: "太仓红马机械设备制造有限公司",
          coordinate: "121.11082532753755,31.5746451969521",
          districtCode: "320585",
          districtName: "太仓市",
          deviceCount: 17,
          gatewayCount: 2,
          paramCount: 34,
          hasWarning: 0,
        },
        {
          id: "6761f7fbbae3459f97d28e46719f9848",
          name: "柿沼制冷（苏州）有限公司",
          coordinate: "120.7298897133152,31.3304431437088",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 2,
          gatewayCount: 1,
          paramCount: 4,
          hasWarning: 0,
        },
        {
          id: "70a22a2832d04b4d91ff1b5922cdf552",
          name: "太仓市凯德防腐科技有限公司",
          coordinate: "121.09522086252373,31.695569715253114",
          districtCode: "320585",
          districtName: "太仓市",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 5,
          hasWarning: 0,
        },
        {
          id: "77e95f7bf0a84bbbac20511f59a9b319",
          name: "麦特达因(苏州)汽车部件有限公司",
          coordinate: "120.81757259549974,31.314438229551936",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 5,
          hasWarning: 0,
        },
        {
          id: "7d0fa6bd6c3b434e82a9959d6c943218",
          name: "裕克施乐塑料制品（太仓）有限公司",
          coordinate: "116.4133836971231,39.910924547299565",
          districtCode: "320585",
          districtName: "太仓市",
          deviceCount: 8,
          gatewayCount: 1,
          paramCount: 16,
          hasWarning: 0,
        },
        {
          id: "7ebd1040f3cd42de96b5fe6ddbf2d679",
          name: "雅士利涂料（苏州）有限公司",
          coordinate: "120.7298897133152,31.3304431437088",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 3,
          gatewayCount: 3,
          paramCount: 6,
          hasWarning: 0,
        },
        {
          id: "80031d57b5ad4f6cab59a406b3bdddc0",
          name: "卫美恒（苏州）医疗器械有限公司",
          coordinate: "120.86334287818303,31.318186037968466",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 3,
          hasWarning: 0,
        },
        {
          id: "9dedaf6435164db8ac202f8a12aeb4c7",
          name: "麦克维尔空调制冷(苏州)有限公司",
          coordinate: "120.79773576407557,31.3196853376012",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 5,
          hasWarning: 0,
        },
        {
          id: "a3b18c3aca1845ad93ed18742cc84d0f",
          name: "康美包(苏州)有限公司",
          coordinate: "120.79066349462607,31.32754143935975",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 4,
          gatewayCount: 4,
          paramCount: 16,
          hasWarning: 0,
        },
        {
          id: "a7ab0156a23149bf91d188252c4c90f8",
          name: "华菱科技（苏州）有限公司",
          coordinate: "120.81372865639193,31.324931346734576",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 3,
          hasWarning: 0,
        },
        {
          id: "acaa5b08488b48bc9cfc9351e6130e6f",
          name: "太仓力达莱特精密工业有限公司",
          coordinate: "121.05015952254891,31.50965375326678",
          districtCode: "320585",
          districtName: "太仓市",
          deviceCount: 2,
          gatewayCount: 1,
          paramCount: 4,
          hasWarning: 0,
        },
        {
          id: "b613d3bacdc44a1b94d4b545f211614b",
          name: "乔治费歇尔金属成型科技（苏州）有限公司",
          coordinate: "120.79525455442646,31.31907136628446",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 3,
          hasWarning: 0,
        },
        {
          id: "bedc645807be4eee9f4eff2aa7a60dae",
          name: "哈金森工业橡胶制品（苏州）有限公司",
          coordinate: "120.8154502589018,31.376196953467606",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 3,
          hasWarning: 0,
        },
        {
          id: "c20dd13a1dfc4ee484440e3966af6a93",
          name: "苏州联屹精密机械有限公司",
          coordinate: "120.74762235391263,31.348430420024464",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 3,
          hasWarning: 0,
        },
        {
          id: "c27ac77b32fa4072ab09197079c9bacc",
          name: "大同电工（苏州）有限公司",
          coordinate: "120.80043625009968,31.337734105063348",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 3,
          hasWarning: 0,
        },
        {
          id: "c85908a5910a42fcb617ed5465806e2e",
          name: "无锡沃德汽车零部件有限公司",
          coordinate: "120.56010027022987,31.545099462884213",
          districtCode: "320205",
          districtName: "锡山区",
          deviceCount: 6,
          gatewayCount: 1,
          paramCount: 12,
          hasWarning: 0,
        },
        {
          id: "d930cbef422e479fa7417d5baae24c40",
          name: "海德鲁铝业（苏州）有限公司",
          coordinate: "120.78988574171562,31.3057486023035",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 8,
          gatewayCount: 1,
          paramCount: 40,
          hasWarning: 1,
        },
        {
          id: "e6c01c837633421ba9111351e3bf7c2a",
          name: "敬鹏(常熟)电子有限公司",
          coordinate: "120.81101218052983,31.598708349116254",
          districtCode: "320581",
          districtName: "常熟市",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 6,
          hasWarning: 0,
        },
        {
          id: "f37688f12bad430d88da334132e9fe91",
          name: "苏州爱知科技有限公司",
          coordinate: "120.8206836071419,31.328173519442352",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 5,
          hasWarning: 1,
        },
      ];
      this.pageflag = true;

      this.tableData = res.filter(
        (item) => item.name !== "江苏安胜达安全科技有限公司"
      );
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.center-bottoms {
  height: 100%;
  flex: 3;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0px 10px;
  .chart::-webkit-scrollbar {
    display: none;
  }
  .chart {
    width: 100%;
    overflow-y: scroll;
    .table1 {
      width: 100%;
      font-size: 14px;
      table-layout: fixed;
      border-collapse: separate;
      border-spacing: 0px 0px;
      .seamless-warp {
        height: 100%;
        overflow: hidden;
        .item {
          padding: 0px 10px;
        }
      }
      .headtr {
        border-bottom: 1px solid rgba(9, 53, 92, 0.4);
        border-top: 1px solid rgba(9, 53, 92, 0.4);
        line-height: 14px;
        background-color: rgba(9, 53, 92, 0.4);
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #71cdf9;
      }
      li {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        height: 36px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        span{
          display: block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      li:nth-child(2n) {
        height: 36px;
        background-color: rgba(113, 205, 249, 0.1);
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }

      th {
        height: 17px;
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        line-height: 17px;
      }
      td {
        text-align: center;
        color: white;
      }
      .rank1 {
        color: #66c852;
      }
      .rank1 {
        color: #66c852;
      }
      .rank2 {
        color: #fdb628;
      }
      .rank3 {
        color: #ed504c;
      }
    }
  }
}
.titleBox{
  &-p{
    img{
      width: 11px;
      height: 16px;
      margin-top: 2px;
    }
    span{
      font-size: 16px;
      color: #1EE7E7;
    }
  }
}

// .headtr-th {
//   text-align: center;
//   font-size: 16px;
//   font-family: Source Han Sans CN;
//   font-weight: 400;
//   color: #fff;
//   line-height: 18px;
// }
</style>

